<template>
    <div style="width: 100%; height: auto">
        <!-- 基本信息 -->
        <div style="border: 0px solid #f00; margin-top: 0.5%; border-radius: 25px; background-color: #fff">
            <div style="width: 98%; margin-left: 1%">
                <el-form :model="form" ref="form" label-width="20%" label-position="right" class="demo-ruleForm">
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="用户名" prop="userName">
                                <el-input v-model="form.userName" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="部门" prop="branchName">
                                <el-input v-model="form.branchName" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '姓名不能为空',trigger: 'change' }]">
                                <el-input class="input_row" v-model="form.name" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="职务" prop="jobTitle">
                                <el-input class="input_row" v-model="form.jobTitle" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="性别" prop="sex">
                                <div class="input_css" style="width: 96%">
                                    &nbsp;
                                    <el-radio-group v-model="form.sex">
                                        <el-radio label="1">男</el-radio>
                                        <el-radio label="0">女</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="电话" prop="phone">
                                <el-input class="input_row" v-model="form.phone" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="手机" prop="cell_phone">
                                <el-input class="input_row"  v-model="form.cell_phone" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="电子邮件" prop="email">
                                <el-input class="input_row" v-model="form.email" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="邮编" prop="postCode">
                                <el-input class="input_row" v-model="form.postCode" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="地址" prop="address">
                                <el-input class="input_row" v-model="form.address" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="备注" prop="remark">
                                <el-input class="input_row" v-model="form.remark" :autosize="{ minRows: 2, maxRows: 4}" placeholder="" style="width: 50%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <br />
        <!-- 录入信息 -->
        
        <!-- 按钮 -->
        <div style="text-align: center">
            <el-image :src="submit_img" style="width: 150px; height: 60px" @click="update"></el-image>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            submit_img: require('../../assets/imgs/imgs/组 422.png'),
            labelPosition: 'right',
            form: {
                
            },
        };
    },
    watch: {
    },
    created(){
        this.getform()
    },
    methods: {
        getform(){
            this.$post('/sysManage/user/personal').then((res)=>{
                console.log(res);
                this.form = res.data
            })
        },
        update(){
            this.$post('/sysManage/user/save',this.form).then((res)=>{
                console.log(res);
                if(res.code == 2000){
                    this.$message.success('保存成功!');
                }
            })
        },
         changeLayout (type) {
            let $ = this.$
            if (type === 1) {
                $('.right_box').show()
                $('.left-2').css('cssText', 'position: relative;width: 100%;')
            } else if (type === 2) {
                $('.right_box').hide()
                $('.left-2').css('cssText', 'position: absolute;width: 98%;')
            }
        }
    },
     mounted(){
         this.changeLayout(2)
    },
     destroyed() {
        this.changeLayout(1)
    }
    // mounted(){
    //     this.update()
    // }
};
</script>
<style scoped>
/* 输入框样式 */
.el-input--small .el-input__inner {
    border: 0;
}
.input_css {
    border: 0;
}
.input_row{
    background: #f0f0f0;
    border: 1px solid #2e8ccc;
}
.el-textarea__inner {
    background: #f0f0f0;
    border: 1px solid #2e8ccc;
    height: 70px !important;
}
.fontStyle {
    font-size: 20px;
    font-family: '微软雅黑';
    color: #2e8ccc;
    font-weight: 600;
}
.el-divider--horizontal {
    margin: 10px 0;
    background-color: #2e8ccc;
    height: 2px;
}
.row_Css {
    font-size: 18px;
    font-family: '微软雅黑';
    color: #000;
    font-weight: 600;
}
.el-form-item__label{
    border: 1px solid #000000;
    background: greenyellow;
    padding: 0.5%;
}
.el-form-item__content{
    padding: 0.5% 0.5% 0% 0%;
    border: 1px solid #000;
}
</style>
